<template>
  <div style="background: #f3f3f3;">
    <div class="index-banner">
      <!-- <div class="container">
        <div class="left">
          <p class="b">海量名字筛选</p>
          <p class="d">拒绝套路、拒绝忽悠、全国首家起名平台，满意选标付款！</p>
          <a href="#" class="check">查看详情</a>
        </div>
      </div>-->
      <!-- <img src="../../assets/images/index-banner1.png" alt=""> -->
    </div>
    <h4 class="cygj">常用工具箱</h4>
    <div class="container">
      <ul>
        <li>
          <router-link to="/classic_input">
            <div>
              <img :src="icon1" alt />
            </div>
            <p>经典起名</p>
          </router-link>
        </li>
        <li>
          <router-link to="/high_input">
            <div>
              <img :src="icon2" alt />
            </div>
            <p>高分起名</p>
          </router-link>
        </li>
        <li>
          <router-link to="/select_author">
            <div>
              <img :src="icon3" alt />
            </div>
            <p>诗词起名</p>
          </router-link>
        </li>
        <li>
          <router-link to="/wuXing_input">
            <div>
              <img :src="icon4" alt />
            </div>
            <p>五行字典</p>
          </router-link>
        </li>
        <li>
          <router-link to="/search_name">
            <div>
              <img :src="icon5" alt />
            </div>
            <p>重名查询</p>
          </router-link>
        </li>
        <li>
          <router-link to="/name_grade">
            <div>
              <img :src="icon6" alt />
            </div>
            <p>姓名打分</p>
          </router-link>
        </li>
        <li>
          <router-link to="/birth_input">
            <div>
              <img :src="icon7" alt />
            </div>
            <p>生辰八字</p>
          </router-link>
        </li>
        <li>
          <div>
            <img :src="icon8" alt />
          </div>
          <p>更多工具</p>
        </li>
      </ul>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import icon1 from "@/assets/images/icon1.png";
import icon2 from "@/assets/images/icon2.png";
import icon3 from "@/assets/images/icon3.png";
import icon4 from "@/assets/images/icon4.png";
import icon5 from "@/assets/images/icon5.png";
import icon6 from "@/assets/images/icon6.png";
import icon7 from "@/assets/images/icon7.png";
import icon8 from "@/assets/images/icon8.png";
import clientBtn from '../../components/clientBtn'

export default {
  components: {
    clientBtn
  },
  data() {
    return {
      icon1,
      icon2,
      icon3,
      icon4,
      icon5,
      icon6,
      icon7,
      icon8
    };
  },
  mounted(){
    _MEIQIA('hidePanel');
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 0px) and (max-width: 900px) {
  .index-banner {
    background: url(../../assets/images/haibao/case.png) no-repeat;
    background-size: 100% 240px;
    height: 240px;
    width: 100%;
    background-position: center;
  }
}
@media (min-width: 900px) {
  .index-banner {
    background: url(../../assets/images/index-banner1.png) no-repeat;
    background-size: 100% 240px;
    height: 240px;
    width: 100%;
    background-position: center;
  }
}

.container ul {
  overflow: hidden;
}

.container ul li {
  float: left;
  background: #fff;
  width: 250px;
  margin: 25px 25px;
  background: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 20px 0;
  box-shadow: 0 0 40px 0 rgba(157, 163, 179, 0.15);
  border: 3px solid #fff;
}
.container ul li:hover {
  border: 3px solid #405cda;
}
.container ul li div img {
  width: 160px;
  height: 160px;
}

.container ul li p {
  font-size: 18px;
  color: #333333;
  line-height: 60px;
}
.cygj {
  display: none;
}
@media (max-width: 1200px) {
  .container ul li {
    width: 96%;
    margin: 10px 2%;
    padding: 10 3%;
  }
  .cygj {
    display: block;
    line-height: 60px;
    font-size: 24px;
    text-align: left;
    color: #454857;
    padding-top: 20px;
    width: 92%;
    margin: 0 auto;
  }
}
</style>